Task: task-988155

Links: Accordion component | Accordion patterns

Component
http://localhost:1111/components/accordion.html

Fluent 2 - React Accordion - Fluent 2 Design System (microsoft.design)
Figma - Fluent 2 web – Figma
Accessibility - Accordion Pattern (Sections With Show/Hide Functionality) | APG | WAI | W3C

Handles:

• 3 sizes (matches fluent)
• Multiple open panels or only 1 open panel, designated open panel on page load
• Left and right aligned icon (matches fluent arrow direction)
  * Automatically adds left/right padding if background color atomic classes are used
• Uses same animation for chevron direction change + timing as current _details.scss icon (transition: transform 0.15s)

Pattern
http://localhost:1111/patterns/accordion.html
Serves 2 functions

1. Use atomics to show pattern that will be used for upcoming Ignite designs.
2. This component will deprecate the need for _details.scss currently used in docs-ui, 2 patterns used to show the 2 scenarios currently being used on docs-ui.

Form-based advisor/Plan adjuster pattern for Ignite
Figmas (press Shift + 2 after page load to zoom in on component selection):

• Form-based advisor - Plan generation view
• Plan Adjuster UI

_details.scss usage in docs-ui

• 2nd example would replace Training journey section below first bifold
  • https://learn.microsoft.com/en-us/training/career-paths/ai-engineer

3rd pattern example would replace:

• Marketing page FAQ pattern (right aligned chevron, body gray content container.)
  • https://review.learn.microsoft.com/en-us/test/marketing/?branch=main#frequently-asked-questions-title

Testing

1. Visit preview pages to view new pages
   Expected result: Component page matches Figma. Patterns match docs-ui .details usage (FAQ, Career Path Journey section), and Form-based advisor/Plan adjuster designs proposed for Ignite
2. Visit Select component page
   Expected result: Verify refactor to use shared chevron mixin results in no visual changes from existing page

Additional information

[Optional]

Contributor checklist

• Did you update the description of this pull request with a review link and test steps?
• Did you submit a changeset? Changesets are required for all code changes.
• Does your pull request implement complex UI logic (js/ts)? Consider adding an integration test to test your user flow.
• Does your pull request add a new page to the documentation site? Add your new page for automated accessibility testing in /integration/tests/accessibility.